<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>改变图片边框样式</title>
<style type="text/css">
.out{border:solid 1px #eeeeee;}
.over{border:solid 2px #F60;}
</style>
<script>
 //训练要点
 //（1）使用onmouseover和onmouseout事件。
 //（2）使用className属性。 

 //实现思路及步骤
 //（1） 设置每幅图片的样式为类选择器“out”，并添加onmouseover和onmouseout事件。
 //（2） 在每幅图片的onmouseover事件中更改图片的样式为“over”，在onmouseout事件中恢复图片的样式为“out”，关键代码如下所示。
 //“out”和“over”样式参考代码如下所示。
 //    .out{border:solid 1px #eeeeee;}
 //   .over{border:solid 2px #F60;}

 //--------------在此开始你的代码--------------------
 



 //--------------在此结束你的代码--------------------

</script>
</head>

<body><table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="images/new_01.jpg" class="out" /></td>
    <td><img src="images/new_02.jpg" class="out" /></td>
    <td><img src="images/new_03.jpg" class="out" /></td>
  </tr>
</table>

</body>
</html>
